<template>
	<view class="read_more_box">
		<template v-if="title === '英语短文'">
			<view class="content_1 content" v-for="item in articleList" :key="item.id" @tap="goToPage('/pages/expands/readDetails/readDetails?id=' + item.id) + '&title=' + '英语短文'">
				<view class="image">
					<image :src="item.picture"></image>
				</view>
				<view class="title">{{ item.titleUk }}</view>
				<view class="text">{{ item.content }}</view>
			</view>
		</template>
		
		<template v-if="title === '英语视频'">
			<view class="content_1 content" v-for="item in videoList" :key="item.id" @tap="goToPage('/pages/expands/readDetails/readDetails?id=' + item.id) + '&title=' + '英语视频'">
				<view class="image">
					<image :src="item.homepage"></image>
				</view>
				<view class="title">{{ item.title }}</view>
				<view class="text">{{ item.caption }}</view>
			</view>
		</template>
		
		<template v-if="title === '英语绘本'">
			<view class="content_2 flex_ac">
				<view class="content_item" v-for="item in pictureBookList" :key="item.id" @tap="goToPage('/pages/expands/readDetails/readDetails?id=' + item.id + '&title=' + '英语绘本')">
					<view class="image">
						<image :src="item.homepage"></image>
					</view>
					<view class="title">{{ item.title }}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { listArticle, listVideo, listPictureBook } from '@/api/expands/readMore/readMore.js';
	
	export default {
		data() {
			return {
				title: '',
				articleList: [],
				videoList: [],
				pictureBookList: []
			}
		},
		onLoad(options) {
			this.title = options.type === '0' ? '英语短文' : options.type === '1' ? '英语视频' : '英语绘本'
			uni.setNavigationBarTitle({
				title: this.title
			})
			
			if (options.type === '0') {
				this.getArticle()
			} else if(options.type === '1') {
				this.getVideo()
			} else {
				this.getPictureBook()
			}
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url
				})
			},
			async getArticle() {
				const { data } = await listArticle()
				this.articleList = data
			},
			async getVideo() {
				const { data } = await listVideo()
				this.videoList = data
			},
			async getPictureBook() {
				const { data } = await listPictureBook()
				this.pictureBookList = data
			},
		}
	}
</script>

<style lang="scss" scoped>
.read_more_box {
	padding: 30rpx;
	
	.content {
		margin-bottom: 50rpx;
		
		.title {
			margin-top: 10rpx;
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.text {
			margin-top: 8rpx;
			font-size: 24rpx;
			color: $uni-text-color-grey;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	
	.content_1 {
		.image image {
			width: 100%;
			height: 300rpx;
			border-radius: 10rpx;
		}
	}
	.content_2 {
		flex-wrap: wrap;
		
		.content_item {
			width: 33%;
			margin-bottom: 50rpx;
			text-align: center;
			
			.image image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			
			.title {
				font-size: 28rpx;
				color: $uni-text-color;
				margin-top: 8rpx;
			}
		}
	}
	
}
</style>
